<html>
  <head>
  
	<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="0">
  
  <title>Style CRUD</title>
  	<script src="../../js/jquery.js"></script>
	<script src="../../js/jquery-ui.custom.js"></script>
	<script src="../../js/aup_wo_jq.js"></script>
	<script src="../../js/aupQuery.js"></script>
	
	<script>
		$(function() {
  			
			var feedback = aup.component('feedback');
  			feedback.message = aup.observe();
  			feedback.isHidden = function(){
  				return feedback.message() == null;
  			};
  			
  			var list = aup.component('list');
  			list.styles = [];
  			list.removeStyle = function(index){
  				
  				var name = list.styles[index]
				aup.ajax({
           			url: 'remove',
           			data: 'name=' + name,
           			success: function(data)	{
           				if(data.substring(0, 2) == 'ok') {
           					feedback.message('eliminazione avvenuta con successo');
           					list.styles.splice(index, 1);	
           					aup.publish('update');
    					} else {
    						feedback.message('errore di cancellazione: ' + data);
	          			}
	        		}	
         		});
  			};
  			list.listen('update');
  			
  			var form = aup.component('add');
  			form.addStyle = function() {
				var formData = $("#add").serialize();
				
				aup.ajax({
           			url: 'add',
           			data: formData,
           			success: function(data)	{
           				if(data.substring(0, 2) == 'ok') {
           					feedback.message('caricamento avvenuto con successo');
               				list.styles.push($('#styleName').val());
               				aup.publish('update');
	           			} else {
	           				feedback.message('errore di caricamento: ' + data);
	           			}
	           		}	
         		});
				return false; // avoid to execute the actual submit of the form.
			}
			aup.start();
			
			
			aup.ajax({
				retType : 'json',
				url : 'list',
				success : function(command) {
					$.each(command, function(i, item) {
						list.styles.push(item.name);
					});
					feedback.message('Caricamento avvenuto con successo');
					aup.publish('update');
				},
				error : function() {
					feedback.message('errore nel caricamento lista stili');
				}
			});
    	});
  	</script>
  </head>
  <body>
	<!-- messages -->
	<span id ="feedback" bind='text: message, css visibility hidden: isHidden' >testo</span>
  	
  	<!-- form -->
	<form id="add" events='submit: addStyle' >
 		<input type="text" id='styleName' name="name" />
  	</form>
  	
  	<!-- list -->
	<div id="list" >
  		<div bind="foreach: styles">
  			<span bind="text: val" > </span><span events="click: removeStyle index"> Cancella </span><br>
  		</div>
  	</div>
  </body>
</html>